IE浏览器中的ajax缓存问题与new Date()兼容性问题的解决方法

1、 最近项目做兼容性测试时发现,IE11下采用ajax发送请求更新数据时页面数据始终保持不变,刷新页面也没用,退出后重新登录网站才能获得最新的数据;

网上搜索后才发现原因是:IE浏览器中存在AJAX缓存,当请求地址和参数不变时(‘GET请求’),直接从缓存中获取数据,并不会发送请求,因此数据无法更新;POST请求因为参数发生变化了,因此能正常发送;

解决方法就是:在每一次GET请求中加入随机数或者是当前时间作为参数,这样每次的请求不一样,就能获取到最新的数据;

但另一个问题是,项目中使用GET请求的地方太多,一个个更改效率太低;我们的项目采用的是Vue框架,请求发送是基于Vue-resource,恰好Vue-resource提供了一个拦截器inteceptor,可以用来拦截请求,对响应前后的数据做处理,因此在main.js中添加一个全局的拦截器,对项目中的所有GET请求进行统一处理:

1
2
3
4
5
6
7
8
9
10
Vue.http.interceptors.push((request, next) => {
// console.log(this)//此处this为请求所在页面的Vue实例
if(request.method === 'GET'){
request.url +='?_='+new Date().getTime();
//console.log(request);
}
next((response) => {
return response;
});
});

这样每一次的GET请求就是全新的了,IE浏览器下的数据获取与更改都正常了;

2、另一个兼容性问题是:
使用 let st = new Date(‘2017-5-4 00:00:00’).getTime() 获取相应的时间时,IE将返回NaN, chrome和firefox则能正常使用;原因是每个浏览器的new Date()方法允许传入的参数不一致,IE不允许采用‘ - ’的格式传入时间参数;改用‘ / ’的格式则可以兼容;因此对传入的参数做如下处理:

1
2
let t1 = '2017-5-4 00:00:00';
let st = Date.parse(t.replace(/-/g,"/"));